<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>联系人卡片</title>
    <link rel="stylesheet" href="./assets/fonts/iconfont.css" />
    <style>
        *{
            padding: 0;
            margin: 0;
        }
      body {
        position: relative;
        user-select: none;
        background-color: #161724;
        min-height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        &::before,
        &::after {
          content: "";
          position: absolute;
          width: 300px;
          height: 300px;
          border-radius: 50%;
        }
        &::before {
          top: -100px;
          left: -100px;
          background-image: linear-gradient(45deg, #ff00ff, #00ffff);
        }
        &::after {
          bottom: -100px;
          right: -100px;
          background-image: linear-gradient(45deg, #ffff00, #00ff00);
        }
      }
      .card {
        position: relative;
        width: 220px;
        height: 280px;
        background-color: #21222e;
        border-radius: 10px;
        text-align: center;
        overflow: hidden;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 6px 6px rgba(0, 0, 0, 0.2);
        .sci{
            position: absolute;
            bottom: 40px;
            display: flex;
            list-style: none;
            left: 50%;
            transform: translateX(-50%);
            li{
                margin: 0 10px;
                transform: translateY(70px);
                transition:  0.5s;
                opacity: 0;
                transition-duration: calc(0.3s * var(--i));
                a{
                    font-size: 20px;
                    color: #fff;
                }
                
            }
        }
        .circle {
          height: 120px;
          width: 120px;
          border-radius: 50%;
          margin: auto;
          border: 5px solid #fff;
          margin-top: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          i {
            font-size: 100px;
            color: rgb(36, 36, 218);
          }
        }
        .content{
            font-size: 20px;
            margin-top: 10px;
            color: #fff;
            p{
                margin-top: 10px;
            }
        }
        .card-content{
            opacity: .5;
            transition: all .5s;
        }
        &:hover{
            .card-content{
                opacity: 1;
                transform: translateY(-20px);
            }
            .sci li {
                opacity: 1;
                transform: translateY(20px);
            }
        }
      }
    </style>
  </head>
  <body>
    <!-- 1 -->
    <div class="card">
      <div class="card-content">
        <div class="circle">
          <i class="iconfont icon-twitter-fill"></i>
        </div>
        <div class="content">
           <h3>YOUR NAME</h3>
           <p>小蓝鸟</p>
        </div>
      </div>
      <ul class="sci">
        <li style="--i:1">
            <a class="iconfont icon-whatsapp"></a>
        </li>
        <li style="--i:2">
            <a class="iconfont icon-facebook"></a>
        </li>
        <li style="--i:3">
            <a class="iconfont icon-Instagram"></a>
        </li>
      </ul>
    </div>
    <!-- 2 -->
    <div class="card">
        <div class="card-content">
          <div class="circle">
            <i class="iconfont icon-huawei" style="color: red;"></i>
          </div>
          <div class="content">
             <h3>YOUR NAME</h3>
             <p>华为</p>
          </div>
        </div>
        <ul class="sci">
          <li style="--i:1">
              <a class="iconfont icon-whatsapp"></a>
          </li>
          <li style="--i:2">
              <a class="iconfont icon-facebook"></a>
          </li>
          <li style="--i:3">
              <a class="iconfont icon-Instagram"></a>
          </li>
        </ul>
      </div>
      <!-- 3 -->
      <div class="card">
        <div class="card-content">
          <div class="circle">
            <i class="iconfont icon-Apple" style="color: #A19F9E;"></i>
          </div>
          <div class="content">
             <h3>YOUR NAME</h3>
             <p>Apple</p>
          </div>
        </div>
        <ul class="sci">
          <li style="--i:1">
              <a class="iconfont icon-whatsapp"></a>
          </li>
          <li style="--i:2">
              <a class="iconfont icon-facebook"></a>
          </li>
          <li style="--i:3">
              <a class="iconfont icon-Instagram"></a>
          </li>
        </ul>
      </div>
  </body>
</html>
